<template>
    <div class="container">
        <el-row>
            <el-col :span="12" :xs="0"></el-col>
            <el-col :span="12" :xs="24">
                <el-form :model="loginForm" :rules="loginRules" ref="loginFroms">
                    <h1>Hello</h1>
                    <h2>欢迎来到商品甄选</h2>

                    <el-form-item prop="username">
                        <el-input :prefix-icon="User" v-model="loginForm.username"></el-input>
                    </el-form-item>

                    <el-form-item prop="password">
                        <el-input type="password" :prefix-icon="Lock" v-model="loginForm.password"
                            show-password></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button :loading="loading" type="primary" @click="login">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang='ts'>
import { User, Lock } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
import useUserStore from '@/store/modules/user';
import { useRouter } from 'vue-router';
import { ElNotification } from 'element-plus';
import { getTime } from '@/utils/getTime';
const useStore = useUserStore()
const router = useRouter()
//按钮加载状态
const loading = ref(false)
const loginFroms = ref()
const loginForm = reactive({
    username: "",
    password: ""
})

const login = async () => {

    await loginFroms.value.validate() 
    //开始加载
    loading.value = true
    try {
        await useStore.userLogin(loginForm)
        router.push('/')
        ElNotification({
            type: 'success',
            message: "欢迎回来",
            title: `Hi,${getTime()}好`
        })
        loading.value = false
    } catch (error) {
        // console.log(error)
        loading.value = false
        ElNotification({
            type: 'error',
            message: (error as Error).message
        })
    }
}

const validatorUserName = (rule: any, value: any, callback: any) => {
    //rule:校验规则对象
    //value:表单元素内容
    if (value.length <= 14) {
        callback()
    } else {
        callback(new Error("账号长度小于14位"))
    }
}

const validatorPassword = (rule: any, value: any, callback: any) => {
    // if (/^\d{3,7}$/.test(value)) 
    if (value.length <= 14){
        callback()
    } else {
        callback(new Error("密码长度至少3位"))
    }
}
const loginRules = {
    username: [
        { trigger: 'blur', validator: validatorUserName }
    ],
    password: [
        { trigger: 'blur', validator: validatorPassword }
    ]
}
</script>

<style scoped lang="scss">
.container {
    width: 100%;
    height: 100vh;
    background: url('@/assets/images/background.jpg') no-repeat;
    background-size: cover;

    .el-form {
        width: 80%;
        top: 30vh;
        position: relative;
        background: url('@/assets/images/login_form.png') no-repeat;
        background-size: cover;
        padding: 40px;

        .el-button {
            width: 100%
        }
    }

    h1 {
        color: whtie;
        font-size: 40px;
        color: white;
    }

    h2 {
        color: white;
        font-size: 20px;
        margin: 20px 0;
    }
}
</style>